<!-- reportingResults -->
<template>
    <div class="page">
        <div class="fh" @click="goreportingJst()">
            <img class='contentg' src="../../assets/img/fhh.png" alt="">
        </div>
        <!-- 页面内容 -->
        <div class="content">
            <!---->
            <div class='contentTop'>
                <div class="contentTopLeft">获取分享码</div>
                <img class='contentTopRight' src="../../assets/img/fxbg.png" alt="">
            </div>
            <!-- 分享码 -->
            <div class='contentSection' v-if="contentSectionShow">
                <div class='sectionTop'>
                    {{ authCodeModelTipsFirst.data }}
                </div>
                <!---->
                <div class="contentBottom">
                    <div class="bottomTop">
                        <img class="sqmg" src="../../assets/img/sqm.png" alt="">
                        <div class="sqmdv" @click="codePopShow('1')" v-log-button-name="'保单检视_获取分享码_生成分享码'">生成分享码</div>
                        
                    </div>
                </div>
            </div>
            <!-- 重新生成授权码 -->
            <div class='contentSection' v-else>
                <div class='cmsqm'> {{ sqm }} </div>
                <div class="sqmButton">
                    <div :class="count == 120 ? 'sqmButtonRight' : 'sqmButtonRight1'" @click="startCountdown()" v-log-button-name="jstflage?'保单检视_获取分享码2_重新生成分享码':'保单检视_获取分享码_重新生成分享码'">
                        <img src="../../assets/img/sqmrght.png" alt="">
                        <div>重新生成分享码 ({{ count }}s)</div>
                    </div>
                    <div class="sqmButtonLeft"> 
                        <img src="../../assets/img/sqmleft.png" alt="">
                        <div @click="copy()" v-log-button-name="jstflage?'保单检视_获取分享码2_复制分享码':'保单检视_获取分享码_复制分享码'"> 复制分享码 </div>
                    </div>
                </div>
                <div class='sectionTop'>
                    {{ authCodeModelTipsShare.data }}
                </div>
            </div>
            <!---->
            <div class="bgzs"></div>
            <!-- 已授权列表 -->
            <div class="ysqqy">
                <div class="ysqqyTop">
                    <div>已验证列表</div>
                </div>
                <div class="ysqSection" v-for="(v, index) in authorCodeList" :key="index">
                    <div class="ysqSectionJbbg">{{ v.reportType }}</div>
                    <!---->
                    <div class="ysqSectiondv">
                        <div>分享码</div>
                        <div>{{ v.authCode }}</div>
                    </div>
                    <!---->
                    <div class="ysqSectiondv">
                        <div>使用对象</div>
                        <div>{{ v.authObject }}</div>
                    </div>
                    <!---->
                    <div class="ysqSectiondv">
                        <div>激活时间</div>
                        <div>{{ v.activationTimeStr }}</div>
                    </div>
                    <!---->
                    <div class="ysqSectiondv">
                        <div>当前状态</div>
                        <div :class="v.activationStatus == '有效' ? 'statusYx' : 'statusWx'">{{ v.activationStatus }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <pop @send-message="sendMessage" v-if="popShow" :footFlag="true">
        <template v-slot:header>
            <div>{{ message }}</div>
        </template>
        <template v-slot:footer>
            <van-button plain type="primary" class="popbtn" @click="sendMessage(0)"  v-btn-log-name="jstflage?'保单检视_意愿核身2_取消':'保单检视_意愿核身_取消'">取消</van-button>
            <van-button type="primary" class="popbtn" @click="sendMessage(1)"  v-btn-log-name="jstflage?'保单检视_意愿核身2_确认':'保单检视_意愿核身_确认'">确定</van-button>
        </template>
    </pop>
</template>

<script lang="ts" setup name="reportingResultShare">
import { useRouter, useRoute } from "vue-router"
import { Toast } from '/@/utils/Message'
import { onMounted, onUnmounted } from "vue"
import { reactive, ref } from 'vue'
import customNavBar from "/src/components/NavBar/customNavBar.vue"
import viewReport from "../../assets/img/tast/htt.png"
import { oneTouchCreatTask } from "../../api/auth/addCustome"
import pop from "/src/components/popFrame/index.vue"
import useClipboard from "vue-clipboard3"
import {
    createAuthorizationCode,
    getConfiguration,
    authorizationCodeList,
    getCustomerInfoByTaskCode,
    cardWhitelist,
    detectAuthUrl,
    detectAuthInfo,
    taskAuthorizationCode,
    getAuthorizationCodeExpire
} from "/@/api/auth/repot.ts";
const jstflage = sessionStorage.getItem('jstJointLoginVo')
//埋点 局部指令封装  未知原因全局埋点按钮点击事件未生效  
const vBtnLogName = {
    mounted(el:any,binding:any){
      el.addEventListener('click',()=>{
         //埋点事件走的方法
      // 请求参数处理
      const isJstLogin = sessionStorage.getItem('jstJointLoginVo')
      let sendMessage = {
        'module_name':isJstLogin?'保单检视_金事通':'保单检视_H5',
        'module_icon_name':binding.value
      }
      //发送埋点事件
    //   _XFLOW_.pushEvent(['click','click_public','点击',sendMessage,function(){}])
      })
    },
    onUnmounted(el:any){
        el.removeEventListener('click')
    }
}

const router = useRouter()
const route = useRoute()
const leftTetx = ref("")
const status = ref(0)
const report = ref("简版报告")
const titleTest = ref("生成失败")
const contentSectionShow = ref(true)
const popShow = ref(false)
const sqm = ref('')
const count = ref(120)
const timer = ref(null)
const authorCodeList = ref([])
const message = '此次为您首次生成分享码，需要您进行意愿核身。系统申请使用您的摄像头和麦克风。'
const authCodeModelTipsShare = ref<any>('')
const authCodeModelTipsFirst = ref<any>('')
let data = reactive({
    ...route.query,
});
const { toClipboard } = useClipboard()

const copy = async () => {
    var val = sqm.value
    try {
        await toClipboard(val);
        Toast("复制成功");
    } catch (e: any) {
        Toast(e);
    }
}

const startCountdown = () => {
    if (timer.value == null) {
        timer.value = setInterval(() => {
            if (count.value > 0) {
                count.value -= 1;
            } else {
                count.value = 120
                clearInterval(timer.value);
                timer.value = null
            }
        }, 1000);
        codePopShow("2")
    }
}
const startCountdown1 = () => {
    if (timer.value == null) {
        timer.value = setInterval(() => {
            if (count.value > 0) {
                count.value -= 1;
            } else {
                count.value = 120
                clearInterval(timer.value);
                timer.value = null
            }
        }, 1000);
    }
}
const startTime = (v:any) => {
    // if (timer.value == null) {
    //     timer.value = setInterval(() => {
    //         if (count.value > 0) {
    //             count.value -= 1;
    //         } else {
    //             count.value = 120
    //             clearInterval(timer.value);
    //             timer.value = null
    //         }
    //     }, 1000);
    // }
    if (timer.value == null) {
        count.value = Number(v)
        timer.value = setInterval(() => {
            if (count.value > 0) {
                count.value -= 1;
            } else {
                count.value = 120
                clearInterval(timer.value);
                timer.value = null
            }
        }, 1000);
    }
}



const codePopShow = (type:any) => {
    createAuthorizationCode({
        taskCode: route.query.taskCode,
        reportType: route.query.reportType || '1',
    }).then((a: any) => {
        if (a.code == 200) {
            contentSectionShow.value = false
            sqm.value = a.authorizationCode
            // 这里需要开始计时
            if(type == "1"){
                startTime(120)
            } else if(type == "2"){
                getAuthorizationCodeExpire({
                    taskCode: route.query.taskCode,
                    reportType: route.query.reportType || '1',
                }).then((r:any)=>{
                    // console.log(r)
                    if(r.time > 0 ) {
                        startTime(r.time)
                    }
                })
                // startTime()
            } 
        } else if (a.code == 408) {
            popShow.value = true
        } else {
            Toast(a.msg)
        }
    });
};
const goreportingJst=()=>{
    router.go(-1)
}
// 意愿核身
const getDetectAuthUrl = () => {
    detectAuthUrl({ taskCode: route.query.taskCode }).then((q: any) => {
        if(q.code == 200){
            var a  = q.data.url
            // window.open(`${a}`)
            // 苹果手机 在微信浏览器 open失效
            window.location.href = a
        }
    })
}
const sendMessage = (v: any) => {
    popShow.value = false
    if (v != 0) {
        // 查询白名单，只要在白名单中就开启意愿核身
        cardWhitelist({ taskCode: route.query.taskCode }).then((a: any) => {
            if (a.data) {
                getDetectAuthUrl()
                //开启腾讯意愿核身 （在白名单中）
            } else {
                // 不在白名单中 不是01也调用意愿核身
                getConfiguration({ name: 'certificationChannel' }).then((v: any) => {
                    if (v.data == '01') {
                        // 开启人脸
                        router.push({
                            name: "userValidation",
                            query: {
                                taskCode: route.query.taskCode,
                                reportType: route.query.reportType,
                                isShare: '01',
                                isYsc: 1,
                                face: 'true',
                            },
                        });
                    } else {
                        //开启腾讯意愿核身
                        getDetectAuthUrl()
                    }
                })
            }
        })
    }
};

onMounted(async () => {
    authCodeModelTipsShare.value = await getConfiguration({ name: 'authCodeModelTipsShare' })
    authCodeModelTipsFirst.value = await getConfiguration({ name: 'authCodeModelTipsFirst' })
    // authCodeModelTipsShare.value =  getConfigurationValue('authCodeModelTipsShare')
    // authCodeModelTipsFirst.value =  getConfigurationValue('authCodeModelTipsFirst')
    // if(data.isShare){
    //     codePopShow()
    // }
    if(route.query.BizToken){
        await detectAuthInfo({ taskCode: route.query.taskCode,  BizToken: route.query.BizToken })
    }
    var q = await taskAuthorizationCode({ taskCode: route.query.taskCode, reportType: route.query.reportType || '1', })
    if(q.code == 200){
        if(q.data){
            contentSectionShow.value = false
            sqm.value = q.data
            getAuthorizationCodeExpire({
                taskCode: route.query.taskCode,
                reportType: route.query.reportType || '1',
            }).then((r:any)=>{
                if(r.time > 0 ) {
                    console.log(r.time)
                    startTime(r.time)
                }
            })
        } else {
            createAuthorizationCode({
            taskCode: route.query.taskCode,
            reportType: route.query.reportType || '1',
            }).then((a: any) => {
                if (a.code == 200 && a.authorizationCode) {
                    contentSectionShow.value = false
                    sqm.value = a.authorizationCode
                    // startCountdown1()
                    startTime(120)
                }
            });
        }
    } else if (q.code == 402){
        router.push({
            path: '/reportingResultwxts',
        })
    }
    
    authorizationCodeList({
        taskCode: route.query.taskCode,
    }).then((a: any) => {
        if (a.code == 200) {
            authorCodeList.value = a.data
        }
    })
})
onUnmounted(() => {
    if (timer.value) {
        clearInterval(timer.value);
    }
});
</script>

<!-- less嵌套设置 -->
<style lang="less" scoped>
.page {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    background: linear-gradient(180deg, #8dc2f7 0%, #87C3FE 6%, #9BCEFE 11%, #B0DCFF 16%, #BAE1FE 21%, #D9EBFC 26%, #F5F7FA 100%), radial-gradient(0% 19% at 0% 0%, #90C7FF 0%, rgba(181, 222, 254, 0) 100%);

    .fh {
        text-align: left;
        margin-top: 30px;
        padding-left: 13px;
    }

    .contentg {
        width: 23px;
        height: 23px;
    }

    .content {
        width: 100%;
        overflow: hidden;

        .contentTop {
            display: flex;
            padding: 0 30px;
            align-items: center;
            justify-content: space-between;

            .contentTopLeft {
                color: #15265A;
                font-size: 30px;
                font-weight: bold;
            }

            .contentTopRight {
                top: -10px;
                width: 130px;
                height: 130px;
                position: relative;
            }
        }

        .contentSection {
            // width: 351px;
            width: 94%;
            height: 230px;
            margin: 0 auto;
            overflow: hidden;
            background: #fff;
            border-radius: 7px;

            .cmsqm {
                height: 41px;
                font-size: 30px;
                margin-top: 19px;
                color: #222222;
                font-weight: bold;
            }

            .sqmButton {
                display: flex;
                font-size: 13px;
                margin-top: 13px;
                justify-content: center;

                .sqmButtonLeft {
                    display: flex;
                    color: #198AFA;
                    margin-left: 10px;
                    padding: 5px 13px;
                    border-radius: 30px;
                    align-items: center;
                    border: 1px solid #198AFA;

                    img {
                        width: 14px;
                        height: 14px;
                    }

                    div {
                        margin-left: 3px;
                    }
                }

                .sqmButtonRight {
                    display: flex;
                    color: #FFFFFF;
                    padding: 7px 13px;
                    border-radius: 30px;
                    align-items: center;
                    background: linear-gradient(#44A1FD 0%, #2792FC 48%, #298BF0 100%);

                    img {
                        width: 14px;
                        height: 14px;
                    }

                    div {
                        margin-left: 3px;
                    }
                }

                .sqmButtonRight1 {
                    display: flex;
                    color: #c8c9cb;
                    padding: 7px 13px;
                    border-radius: 30px;
                    align-items: center;
                    background: #F2F4F7;

                    img {
                        width: 14px;
                        height: 14px;
                    }

                    div {
                        margin-left: 3px;
                    }
                }
            }

            .sectionTop {
                // width: 335px;
                width: 96%;
                padding: 10px;
                font-size: 12px;
                margin-top: 10px;
                margin-left: 8px;
                color: #5E5E5E;
                text-align: left;
                border-radius: 5px;
                background: #F2F4F7;
            }

            .contentBottom {
                width: 100%;
                display: flex;
                margin-top: 30px;
                justify-content: center;

                .bottomTop {
                    padding: 7px 30px;
                    display: flex;
                    align-items: center;
                    border-radius: 30px;
                    background: linear-gradient(#44A1FD 0%, #2792FC 48%, #298BF0 100%);

                    .sqmg {
                        width: 23px;
                        height: 23px;
                    }

                    .sqmdv {
                        font-size: 20px;
                        font-weight: 500;
                        color: #FFFFFF;
                        margin-left: 10px;
                    }
                }
            }
        }

        .bgzs {
            top: -13px;
            width:60%;
            height: 40px;
            z-index: 100;
            margin: 0 auto;
            position: relative;
            background-image: url(../../assets/img/bgzs.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .ysqqy {
            top: -30px;
            // width: 351px;
            width: 94%;
            overflow: hidden;
            margin: 0 auto;
            background: #fff;
            border-radius: 7px;
            position: relative;
            padding-bottom: 30px;

            .ysqqyTop {
                width: 100%;
                display: flex;
                justify-content: center;

                div {
                    // width: 200px;
                    width: 94%;
                    height: 30px;
                    font-size: 17px;
                    color: #222222;
                    line-height: 31px;
                    font-weight: bold;
                    background-image: url(../../assets/img/ysq.png);
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }
            }

            .ysqSection {
                // width: 333px;
                width: 94%;
                height: 170px;
                overflow: hidden;
                margin-top: 17px;
                margin-left: 9px;
                border-radius: 7px;
                position: relative;
                background: linear-gradient(270deg, rgba(242, 244, 247, 0.2) 0%, #F2F4F7 100%);

                .ysqSectionJbbg {
                    width: 80px;
                    height: 27px;
                    font-size: 13px;
                    margin-top: 7px;
                    color: #FFFFFF;
                    line-height: 31px;
                    background-image: url(../../assets/img/jbbg.png);
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }

                .ysqSectiondv {
                    display: flex;
                    padding: 0 10px;
                    margin-top: 10px;
                    justify-content: space-between;

                    div:first-child {
                        font-size: 13px;
                        color: #808080;
                    }

                    div:last-child {
                        font-size: 13px;
                        color: #222222;
                    }

                    .statusYx {
                        width: 43px;
                        height: 20px;
                        color: #0080FF;
                        line-height: 20px;
                        background-image: url(../../assets/img/yx.png);
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }

                    .statusWx {
                        width: 43px;
                        height: 20px;
                        color: #335280;
                        line-height: 20px;
                        background-image: url(../../assets/img/wx.png);
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }
                }
            }
        }
    }
}
.popbtn{
    width: 151px;
    margin-left: 10px;
}
</style>
